<template>
  <div class="box">
    <van-nav-bar title="北京游记攻略" left-arrow @click-left="onClickLeft" />
    <div class="select">
      <div @click="click(1)" :class="type == 1 ? 'active' : ''">玩法</div>
      <div @click="click(2)" :class="type == 2 ? 'active' : ''">人群</div>
      <div @click="click(3)" :class="type == 3 ? 'active' : ''">时间</div>
    </div>
    <div class="time" v-show="bool">
      <div class="selec">
        <div>玩法</div>
        <div>人群</div>
        <div>时间</div>
      </div>
      <van-row gutter="10" class="smallbox">
        <van-col span="6" v-for="(v, i) in arra" :key="i">
          <div class="color">{{ v.text }}</div>
        </van-col>
      </van-row>
    </div>
    <ul>
        <li class="dream" v-for="(v,i) in index" :key="i">
            <div class="box">
                <img :src="v.img" alt="">
                <div class="smallBox">
                    <div class="l1">{{v.title}}</div>
                    <div class="l2">{{v.text}}</div>
                    <div class="l3">
                        <img :src="v.sculpture" alt="">
                        <div class="l4">{{v.text1}}</div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
  </div>
</template>
<script>
import {dreams} from '@/api/wangjiaxuan/index.js'
export default {
  data() {
    return {
        arr: [
            { type: 1, text: "赏秋" },
            { type: 1, text: "第一次" },
            { type: 1, text: "深度游" },
            { type: 1, text: "短途周末" },
            { type: 1, text: "穷游" },
            { type: 1, text: "自驾" },
            { type: 1, text: "美食" },
            { type: 1, text: "登山" },
            { type: 1, text: "骑行" },
            { type: 1, text: "徒步" },
            { type: 1, text: "环游" },
            { type: 1, text: "漫游" },
            { type: 1, text: "古镇" },
            { type: 1, text: "购物" },
            { type: 1, text: "摄影" },
            { type: 1, text: "蜜月" },
            { type: 1, text: "探险" },
            { type: 1, text: "人文" },
            { type: 1, text: "婚纱" },
            { type: 1, text: "海滨海岛" },
            { type: 1, text: "潜水" },
            { type: 1, text: "跨年" },
            { type: 1, text: "冬季" },
            { type: 1, text: "国庆" },
            { type: 2, text: "亲子" },
            { type: 2, text: "情侣" },
            { type: 2, text: "闺蜜" },
            { type: 2, text: "三五好友" },
            { type: 2, text: "家庭" },
            { type: 2, text: "独自一人" },
            { type: 3, text: "1月" },
            { type: 3, text: "2月" },
            { type: 3, text: "3月" },
            { type: 3, text: "4月" },
            { type: 3, text: "5月" },
            { type: 3, text: "6月" },
            { type: 3, text: "7月" },
            { type: 3, text: "8月" },
            { type: 3, text: "9月" },
            { type: 3, text: "10月" },
            { type: 3, text: "11月" },
            { type: 3, text: "12月" },
            { type: 3, text: "1天" },
            { type: 3, text: "2天" },
            { type: 3, text: "3天" },
            { type: 3, text: "4天" },
            { type: 3, text: "5天" },
            { type: 3, text: "6天" },
            { type: 3, text: "7天" },
            { type: 3, text: "8-10天" },
            { type: 3, text: "11-15天" },
            { type: 3, text: "15天以上" },
        ],
            arra: [],
            type: 0,
            bool: false,
            index:[]
        };
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        click(i) {
            this.type = i;
        let arr = this.arr.filter((res) => {
            return res.type == i;
        });
            this.arra = arr;
            this.bool = !this.bool;
        },
        async fun1(){
            let data = await dreams();
            console.log(data);
            this.index = data
        }
    },
    mounted(){
        this.fun1()
    }
};
</script>

<style scoped>
.select {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  border-top: 5px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.selec {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  border-top: 5px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.selec div {
  width: 125px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.select div {
  width: 125px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.time {
  position: fixed;
  z-index: 999;
  background-color: white;
  /* bottom: 0px;s */
  top: 342px;
  overflow: hidden;
  vertical-align: middle;
  height: 342px;
}
.box {
  
}
.color {
  height: 26px;
  margin-bottom: 15px;
  border-radius: 20px;
  text-align: center;
  line-height: 26px;
  border: 1px solid #ccc;
}
.active {
  color: red;
}
.title {
    width: 100%;
    padding-left: 15px;
    margin: 11px 0;
}
.dream{
    height: 210px;
    padding: 5px 10px;
}
.box{
    position: relative;
}
.smallbox{
    
}
.smallBox{
    top: 0;
    position: absolute;
    padding: 20px 10px 10px;
    height: 210px;
    color: white;
}
.box img{
    width: 100%;
    height: 100%;
}
.l1{
    font-size: 18px;
}
.l2{
    margin-bottom: 100px;
}
.l3{
    height: 28px;
    line-height: 28px;
    display: flex;
}
.l3 img{
    width: 28px;
    height: 28px;
    border-radius:50%;
}
</style>